<template>
  <div class="category-container">
    <el-tabs v-model="activeCategory" @tab-click="handleCategoryChange">
      <el-tab-pane v-for="category in categories" :key="category" :label="category" :name="category"></el-tab-pane>
    </el-tabs>

    <el-table :data="data" v-loading="loading" @row-click="goToDetail" row-class-name="clickable-row">
      <el-table-column prop="novel_name" label="书名" />
      <el-table-column prop="Author.name" label="作者" />
      <el-table-column prop="status" label="状态" />
    </el-table>
    <app-pagination
      :current-page="pagination.currentPage"
      :page-size="pagination.pageSize"
      :total="pagination.total"
      @update:current-page="handlePageChange"
      @update:page-size="handleSizeChange"
    />
  </div>
</template>

<script setup>
import { ref, watch } from 'vue';
import { useRouter } from 'vue-router';
import { useCRUD } from '@/composables/useCRUD';
import AppPagination from '@/components/AppPagination.vue';

const router = useRouter();

const categories = ref(['玄幻', '仙侠', '都市', '历史', '科幻', '游戏', '西幻', '武侠', '架空', '音乐']);
const activeCategory = ref(categories.value[0]);

const { 
  data, 
  loading, 
  pagination, 
  handleSearch, 
  handlePageChange, 
  handleSizeChange 
} = useCRUD('/public/novels');

const handleCategoryChange = () => {
  handleSearch({ category: activeCategory.value });
};

const goToDetail = (row) => {
  const selection = window.getSelection().toString();
  if (selection.length === 0) {
    router.push({ name: 'novel-detail', params: { id: row.novel_id } });
  }
};

// Initial load
handleSearch({ category: activeCategory.value });
</script>

<style scoped>
.category-container {
  padding: 20px;
}
:deep(.clickable-row) {
  cursor: pointer;
}
</style>